<template>
  <div>
    <div class="order-affirm">
      <c-title :hide="false" text="订单确认"></c-title>
      <div>
        <!-- {{ goodsOrder[0].order_goods }} -->
        <block v-for="(item, index) in goodsOrder[0] && goodsOrder[0].order_goods" :key="index">
          <goods-card :goodsItem="item">
            <div class="card-footer flex-j-sb" slot="shoptoPay">
              <div class="title">到店付</div>
              <div class="price">
                ¥<span>{{ offlinePrice }}</span>
              </div>
            </div>
            <div class="flex-a-c attribute" slot="subscribe">
              <div class="num">
                <block v-for="(items, tagIndex) in tagList" :key="tagIndex">
                  {{ items.name }}
                  <span v-if="tagIndex < tagList.length - 1">l</span>
                </block>
              </div>
            </div>
          </goods-card>
        </block>
      </div>

      <div class="mb20"></div>
      <div class="order-specifications">
        <div class="num flex-j-sb">
          <div>选择数量</div>
          <div>
            <van-stepper v-model="query.total" :disabled="disabled_stepper" @change="onTotalChange" async-change />
          </div>
        </div>
        <div class="num flex-j-sb">
          <div>商品金额</div>
          <div class="price">
            <text class="symbol">￥</text>
            <text>{{ goodsOrder[0] && goodsOrder[0].goods_price }}</text>
          </div>
        </div>
        <van-cell
          :title="`优惠券 ${coupon_size}张可用`"
          is-link
          :value="use_coupon_size == 0 ? '未使用' : '已选择' + use_coupon_size + '张'"
          :border="false"
          value-class="goods-discounts"
          v-if="isShowCoupon && coupon_size > 0"
          @click="showCoupon"
          custom-class="cell-mb"
        />
        <div v-if="goodsDeductions">
          <block v-for="(item, index) in goodsDeductions" :key="index">
            <div class="order-like flex-a-c flex-j-sb">
              <div class="left">可用{{ item.coin }}{{ item.name }} 抵扣{{ item.amount }}元</div>
              <div class="right">
                <van-switch v-model="item.checked" @change="onLikeChange(index)" size="0.9375rem" active-color="#FF3A00" />
              </div>
            </div>
          </block>
        </div>
      </div>
      <div class="mb20"></div>
      <div class="order-userinfo">
        <van-cell-group>
          <van-field v-model="name" label="姓名" :required="orderInfo.order_force_mobile?true:false" placeholder="请输入姓名" input-align="right" :border="false"  @input="modelInput(name, 0)" />
          <van-field v-model="mobile" label="手机" :required="orderInfo.order_force_mobile?true:false" placeholder="请输入手机号" input-align="right" :border="false"  @input="modelInput(mobile, 1)" />
          <van-field v-model="query.note" label="备注" placeholder="选填，将您的需求告诉我们" input-align="right" :border="false" @input="modelInput(query.note, 2)" />
          <van-field v-model="levelName" label="会员等级" readonly input-align="right" :border="false" />
        </van-cell-group>
      </div>

      <div class="mb220"></div>
      <div class="mb220"></div>
    </div>
    <div class="order-footer">
      <div class="flex-a-c">
        <van-checkbox v-model="agreementChecked" @change="onAgreementChange" checked-color="#ff3a00" icon-size="0.9375rem"></van-checkbox>
        <div class="agreement">我已阅读并同意</div>
        <div class="agreement-msg" @click="onAgreement">个人信息保护声明</div>
      </div>
      <div class="footer-pay flex-j-sb flex-a-c">
        <div class="actually"><text class="gray">实付</text><text class="symbol">￥</text>{{ totalPrice }}</div>
        <div class="footer-btn flex-a-c flex-j-c" @click="onOrderSubmit">提交订单</div>
      </div>
    </div>
    <!--优惠券-->
    <van-popup @click-overlay="couponclose" v-model="popupCouponSpecs" position="bottom" :style="{ overflow: 'visible' }" closeOnClickModal="true">
      <div class="add-info">
        <div class="coupon-list-info" v-for="(coupon, index) in coupons" :key="index">
          <div class="checkList" style="float: left;" v-if="cup_notice" @click.stop="chooseCoupon(index, coupon.valid)">
            <div class="right" v-show="good_clicktag == 0">
              <van-checkbox v-model="coupon.checked" shape="square" :disabled="!coupon.valid" checked-color="#f15353" :name="coupon" @change="selectCoupon($event, coupon)"> </van-checkbox>
            </div>
            <div class="right" v-if="good_clicktag != 0">
              <van-loading />
            </div>
          </div>
          <!-- <van-checkbox v-model="checkedList.a" shape="square" checked-color="#ff3a00"></van-checkbox> -->
          <div :class="[coupon.valid ? 'coupon_voucher_main' : '', !coupon.valid ? 'coupon_voucher_gray' : '']">
            <div class="coupon_voucher_left">
              <div v-if="coupon.belongs_to_coupon.coupon_method == 1">
                <div class="p coupon_voucher_amount type_large">
                  {{ coupon.belongs_to_coupon.deduct }}
                </div>
                <div class="p coupon_voucher_limit">满{{ coupon.belongs_to_coupon.enough }}立减</div>
              </div>
              <div v-else>
                <div class="p coupon_voucher_amount type_large">{{ coupon.belongs_to_coupon.discount }}折</div>
                <div class="p coupon_voucher_limit">满{{ coupon.belongs_to_coupon.enough }}立享</div>
              </div>
            </div>
            <div class="coupon_voucher_hr"></div>
            <div class="coupon_voucher_right flex-column flex-j-sb">
              <div class="p coupon_voucher_range line-clamp-2">{{ coupon.belongs_to_coupon.name }}</div>
              <div v-if="is_coupon_SELE && coupon.checked && coupons_temp[coupon.coupon_id]" class="coupon-stepper">
                <div class="coupon-stepper-num">{{ coupon.has_conpon_id.length }}张</div>
                <van-stepper
                  :class="[coupons_temp[coupon.coupon_id].num >= coupon.valid_num ? 'maxDisabled' : '']"
                  input-class="input-box"
                  plus-class="plus-box"
                  minus-class="minus-box"
                  integer
                  :value="coupons_temp[coupon.coupon_id].num"
                  min="1"
                  :name="coupon"
                  async-change
                  button-size="22px"
                  @change="changeConpon"
                />
              </div>
              <div v-if="!is_coupon_SELE" class="p coupon_voucher_period">{{ coupon.time_start }}-{{ coupon.time_end }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="coubtngroup">
        <div class="btn sure" @click="couponclose">{{ isCueCoupon ? "确定使用" : "确认" }}</div>
        <div class="btn close" @click="couponclose">{{ isCueCoupon && useCouponSize == 0 ? "不用优惠" : "取消" }}</div>
      </div>
    </van-popup>

    <van-popup position="center" v-model="orderShow" @close="onClose" round>
      <div class="qrcode-main">
        <div>
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/down.png" class="down" @click="onClose" />
          <div class="title">{{ pluginSetting.apply_desc_name }}</div>
        </div>
        <div class="qrcode-list">
          <!-- <mp-html content="{{privacyDesc}}"></mp-html> -->
          <div v-html="privacyDesc"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import orderAffirm_controller from "./orderAffirm_controller.js";
export default orderAffirm_controller;
</script>
<style scoped>
#appMain.pcStyle .van-popup {
  left: 50%;
}

.qrcode-main ::v-deep .qrcode-list img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}

.order-affirm ::v-deep .van-popup--center {
  left: 50% !important;
}

.order-affirm ::v-deep .van-cell__title {
  text-align: left;
}
</style>
<style lang="scss" scoped>
/* 公共样式 */
body::-webkit-scrollbar {
  display: none;
}

.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.mb20 {
  height: 0.625rem;
  clear: both;
}

.mb220 {
  height: 6.875rem;
  clear: both;
}

.order-affirm {
  margin: 0.625rem 0.625rem 0 0.625rem;
}

.card-footer {
  margin: 1.0625rem 0 0 0;
  align-items: flex-end;

  .title {
    font-size: 0.9375rem;
    color: #222;
  }

  .price {
    font-size: 0.7163rem;
    color: #ff3a00;

    text {
      font-size: 1.0625rem;
    }
  }
}

.card-main .attribute {
  margin: 0.375rem 0 0 0;
  font-size: 0.7163rem;
  color: #979797;
}

.attribute .num {
  margin: 0 1.9375rem 0 0;
  text-align: left;
}

/* 选择规格 */

.order-specifications {
  background-color: #fff;
  border-radius: 0.3125rem;

  .num {
    align-items: center;
    padding: 0.625rem 1rem 0 1rem;
    font-size: 0.875rem;
    color: #222;
  }

  .cell-mb {
    padding: 0.625rem 1rem 0 0.625rem;
  }
}

.num .price {
  font-size: 1rem;
  color: #ff3a00;

  .symbol {
    font-size: 0.6875rem;
  }
}

.order-specifications {
  .goods-price {
    font-size: 1rem;
    color: #ff3a00;
  }

  .goods-discounts {
    font-size: 0.75rem;
    color: #8e8d92;
  }
}

/* 用户信息 */

.order-userinfo {
  background-color: #fff;
  border-radius: 0.3125rem;
}

.order-pay {
  background-color: #fff;
  border-radius: 0.3125rem;
  padding: 0.75rem 0.75rem 0.6875rem 0.75rem;
  margin: 0 0 3.0313rem 0;
  font-size: 0.9116rem;
  color: #222;

  .manner-img image {
    width: 1.3125rem;
    height: 1.3125rem;
    margin: 0 0.4063rem 0 0;
  }
}

.manner-img {
  align-items: center;
}

.order-footer {
  width: 23.4375rem;
  // width: 100%;
  padding: 0.6563rem 0.6875rem 1.4375rem 0.6875rem;
  box-sizing: border-box;
  background-color: #fff;
  position: fixed;
  z-index: 100;
  bottom: 0;
  // left: 0;

  .agreement {
    font-size: 0.75rem;
    color: #555;
    margin: 0 0.5rem 0 0.375rem;
  }

  .agreement-msg {
    font-size: 0.75rem;
    color: #424e9c;
    cursor: pointer;
  }

  .actually {
    font-size: 1.5625rem;
    color: #ff3a00;
  }
}

.footer-pay {
  margin-top: 0.9375rem;
}

.order-footer {
  .actually {
    .gray {
      font-size: 0.8125rem;
      color: #555;
      margin-right: 0.3125rem;
    }

    .symbol {
      font-size: 0.875rem;
      color: #ff3a00;
    }
  }

  .footer-btn {
    width: 10.4375rem;
    height: 2.6563rem;
    line-height: 2.6563rem;
    text-align: center;
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    font-size: 0.8125rem;
    color: #fff;
    border-radius: 0.3125rem;
    cursor: pointer;
  }
}

/* 券码弹窗 */

.qrcode-main {
  width: 20.8125rem;
  margin: 0 auto;

  /* height: 24.25rem; */
  padding: 1.0313rem 0.625rem 1.25rem 0.625rem;
  box-sizing: border-box;
  position: relative;
  border-radius: 0.3125rem;

  .title {
    width: 20.8125rem;
    font-size: 1.0625rem;
    color: #222;
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .down {
    width: 1.3125rem;
    height: 1.3125rem;
    position: absolute;
    top: 0.9375rem;
    right: 0.9375rem;
    z-index: 10;
  }

  .qrcode-item {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0 0.7188rem;
    height: 2.3438rem;
    background-color: #f4f4f4;
  }

  .qrcode-list {
    width: 20.8125rem;
    height: 21.5625rem;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox隐藏滚动条 */
    -ms-overflow-style: none; /* Internet Explorer 10+隐藏滚动条 */
    ::-webkit-scrollbar {
      width: 0; /* Safari,Chrome 隐藏滚动条 */
      height: 0; /* Safari,Chrome 隐藏滚动条 */
      display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
    }
  }
}

.qrcode-desc {
  width: 19.5625rem;
  height: 100%;

  image {
    width: 19.5625rem !important;
  }
}

.order-like {
  padding: 0.6875rem 0.75rem;
  font-size: 0.9116rem;
  color: #222;
}

.add-info {
  overflow-y: scroll;
  width: 100%;
  background: #fff;
  max-height: 50vh;
  padding-top: 0.625rem;
  z-index: 500;
  position: relative;

  .coupon-list-info {
    width: 99.5%;
    display: flex;
    align-items: center;
  }

  .checkList {
    padding-left: 0.1875rem;
    margin-right: 0.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // .checkList {
  //   position: relative;
  //   top: 1.875rem;
  //   left: 0.1875rem;
  //   -webkit-box-flex: 1;
  //   -ms-flex: 1;
  //   flex: 1;
  // }

  .coupon_voucher_gray {
    flex: 1;
    height: 5rem;
    margin-right: 0.625rem;
    margin-bottom: 0.625rem;
    display: flex;
  }

  .coupon_voucher_main {
    flex: 1;
    height: 5rem;
    margin-right: 0.625rem;
    margin-bottom: 0.625rem;
    display: flex;

    .coupon_voucher_left {
      width: 6.375rem;
      height: 100%;
      color: #fff;
      border-radius: 0.25rem 0 0 0.25rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #47c1c4;
    }
  }

  .coupon_voucher_gray .coupon_voucher_left {
    width: 6.375rem;
    height: 100%;
    color: #fff;
    border-radius: 0.25rem 0 0 0.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #ccc;
  }

  .coupon_voucher_main .coupon_voucher_left .coupon_voucher_amount.type_large,
  .coupon_voucher_gray .coupon_voucher_left .coupon_voucher_amount.type_large {
    margin: 0;
    font-size: 1.375rem;
  }

  .coupon_voucher_main .coupon_voucher_left .coupon_voucher_limit,
  .coupon_voucher_gray .coupon_voucher_left .coupon_voucher_limit {
    font-size: 0.75rem;
    margin-top: 0.8125rem;
    margin-bottom: 0;
  }

  .coupon_voucher_main .coupon_voucher_right {
    flex: 1;
    padding: 0.625rem;
    border-radius: 0 0.25rem 0.25rem 0;
    background-color: #e5f3f3;
    color: #666;
    position: relative;
  }

  .coupon_voucher_gray .coupon_voucher_right {
    flex: 1;
    padding: 0.625rem;
    border-radius: 0 0.25rem 0.25rem 0;
    background-color: #eee;
    color: #666;
    position: relative;
  }

  .coupon_voucher_main .coupon_voucher_right .coupon_voucher_range,
  .coupon_voucher_gray .coupon_voucher_right .coupon_voucher_range {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size: 0.75rem;
    text-align: left;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
  }
}

.coupon_voucher_main {
  .coupon_voucher_right .coupon_voucher_period,
  .coupon_voucher_gray .coupon_voucher_period {
    color: #999;
    font-size: 0.75rem;
    bottom: 0;
  }
}

.coubtngroup {
  display: flex;
  font-size: 0.875rem;
  text-align: center;

  .sure {
    background: #f15353;
    height: 2.5rem;
    line-height: 2.5rem;
    color: #fff;
    width: 50%;
  }

  .close {
    background: #eee;
    height: 2.5rem;
    line-height: 2.5rem;
    color: #333;
    width: 50%;
  }
}

.coupon-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .coupon-stepper-num {
    border-radius: 0.875rem;
    overflow: hidden;
    padding: 0 0.5rem;
    color: #999;
    border: 1px solid #999;
    height: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }

  ::v-deep .van-stepper--round .van-stepper__minus {
    color: #47c1c4;
    border: 1px solid #47c1c4;
  }

  ::v-deep .van-stepper--round .van-stepper__plus {
    background-color: #47c1c4;
  }

  ::v-deep .maxDisabled .van-stepper__plus {
    background-color: #999;
  }
}
</style>
